<template>
  <!-- 在这里实现你的动画交互系统 -->
  <div class="animation-system">
    <!-- 动画组件将在这里渲染 -->
  </div>
</template>

<script setup>
// 在这里编写组件逻辑
</script>

<style>
/* 在这里编写样式 */
</style>

<!-- 
练习要求：创建一个完整的动画交互系统

1. 过渡动画组件
   1.1 基础过渡
   - 淡入淡出效果
   - 滑动效果
   - 缩放效果
   - 旋转效果
   
   1.2 组合过渡
   - 淡入滑动
   - 缩放旋转
   - 弹性动画
   - 自定义组合

2. 列表动画
   - 列表项添加/删除动画
   - 列表重排序动画
   - 列表筛选动画
   - 列表分页切换动画

3. 路由过渡
   - 页面切换效果
   - 层级过渡
   - 方向感知过渡
   - 历史感知过渡

4. 状态动画
   - 加载状态
   - 进度指示
   - 成功/失败状态
   - 数值变化动画

5. 交互反馈
   - 按钮点击效果
   - 输入框焦点动画
   - 悬浮提示动画
   - 错误提示动画

6. 高级动画
   - 视差滚动
   - 路径动画
   - 粒子效果
   - 3D转换

参考实现：

1. 基础过渡：
```vue
<template>
  <TransitionGroup
    name="list"
    tag="ul"
    @before-enter="onBeforeEnter"
    @enter="onEnter"
    @leave="onLeave"
  >
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </TransitionGroup>
</template>

<script setup>
import { ref } from 'vue'
import gsap from 'gsap'

const items = ref([
  { id: 1, text: '项目1' },
  { id: 2, text: '项目2' }
])

const onBeforeEnter = (el) => {
  el.style.opacity = 0
  el.style.transform = 'translateY(30px)'
}

const onEnter = (el, done) => {
  gsap.to(el, {
    opacity: 1,
    y: 0,
    duration: 0.3,
    onComplete: done
  })
}

const onLeave = (el, done) => {
  gsap.to(el, {
    opacity: 0,
    y: -30,
    duration: 0.3,
    onComplete: done
  })
}
</script>

<style scoped>
.list-move, /* 对移动中的元素应用过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

/* 确保离开的项目被移除出布局流 */
.list-leave-active {
  position: absolute;
}
</style>
```

2. 路由过渡：
```vue
<template>
  <router-view v-slot="{ Component }">
    <transition
      name="fade"
      mode="out-in"
      @before-enter="onBeforeEnter"
      @enter="onEnter"
      @leave="onLeave"
    >
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
```

3. 状态动画：
```vue
<template>
  <div class="progress-bar">
    <div 
      class="progress-bar__fill"
      :style="{ width: progress + '%' }"
    ></div>
  </div>
</template>

<style scoped>
.progress-bar {
  width: 100%;
  height: 4px;
  background-color: #f0f0f0;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background-color: #1890ff;
  transition: width 0.3s ease-in-out;
}
</style>
```

完成后，你的动画系统应该：
- 动画流畅，性能优良
- 可复用性强
- 支持多种动画类型
- 易于扩展和定制
- 具有良好的交互反馈
- 适配不同设备和场景
-->
